<template>
  <view class="dropdown">
    <view class="input" :style="{ width: WdHt.w, height: WdHt.h }">
      <u--input
        placeholder="请输入卖场名称"
        border="surround"
        v-model="labelA"
        :customStyle="{
          height: '100%',
          borderColor: '#7b7b7b !important'
        }"
        @change="changeEvent"
        @focus="initEvent"
        @blur="clearnEvent"
        :readonly="disable"
      ></u--input>
      <!-- <view :class="['down', bol ? 'up' : '']" @click="bol = !bol">
        <image src="../../static/images/active/down.png" mode="scaleToFill" />
      </view> -->
    </view>
    <view class="options" v-if="bol">
      <view
        :class="['item', a == v.value ? 'active' : '']"
        v-for="(v, i) in options"
        :key="i"
        @click.stop="clickEvent(v)"
        ><view>{{ v.label }}</view>
        <image
          v-if="a == v.value"
          src="https://oss.xhoven.com/e23bd2e87db926294971de9fc6f7d395.png"
          mode="scaleToFill"
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    WdHt: {
      type: Object,
      default: {
        w: '520rpx',
        h: '64rpx'
      }
    },
    disable: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      bol: false,
      labelA: '',
      a: '',
      timeID: '',
      options: []
    }
  },
  methods: {
    clickEvent (v) {
      this.a = v.value
      this.$emit('input', v.value)
      this.options.forEach(j => {
        if (this.a == j.value) {
          this.labelA = j.label
        }
      })
    },
    setValue (v) {
      this.labelA = v
    },
    changeEvent (v) {
      if (!v) this.$emit('input', v)
      this.a = ''
      clearTimeout(this.timeID)
      this.timeID = setTimeout(() => {
        this.getStoreList(this.labelA)
        this.bol = true
      }, 200)
    },
    initEvent () {
      this.getStoreList(this.labelA)
    },
    clearnEvent () {
      setTimeout(() => {
        this.bol = false
      }, 100)
    },
    close () {
      this.options = []
    },
    async getStoreList (name) {
      const res = await this.$api.my.joinBusiness(name)
      this.options = res.data.data.map(v => {
        return {
          label: v.name,
          value: v.id
        }
      })
      if (this.options.length) this.bol = true
    }
  }
}
</script>

<style lang="less" scoped>
.input {
  position: relative;
  .down {
    position: absolute;
    top: 15rpx;
    right: 20rpx;
    width: 30rpx;
    height: 30rpx;
    z-index: 999;
  }
  .up {
    transform: rotateX(180deg);
    top: 20rpx;
  }
}
.options {
  padding: 0 30rpx;
  background-color: #fff;
  border-radius: 0 0 10rpx 10rpx;
  //   position: relative;
  position: absolute;
  top: 220rpx;
  left: 202rpx;
  width: 520rpx;
  z-index: 999;
  border: 1px solid #7b7b7b;
  max-height: 263rpx;
  overflow-y: scroll;
  .item {
    padding: 26rpx;
    font-size: 25rpx;
    border-bottom: 1px solid #f2f2f2;
    color: #666666;
    &:last-child {
      border-bottom: 0;
    }
  }
  .active {
    color: #3e73fe;
    display: flex;
    justify-content: space-between;
    width: 100%;
    image {
      width: 30rpx !important;
      height: 30rpx !important;
    }
  }
}
</style>
